{% include "rpgEngine/head.html" %}
<script type="text/javascript" src="{{ MEDIA_URL }}shared/messageBox.js"></script>
<script type="text/javascript">
var selectedPage = {{selectedPage}};
var msgPerPage = {{msgPerPage}}
{% for id, orig, dest, body, date in messages %}msg_id_list.push({{id}});{% endfor %}
</script>
<div id="primarycontent">	
	<div class="messageform">
		<form id="formSendMessage" action="/messageBox/" method="post">
			<span id="dest_text">to : </span>
			{{ form.destination }}
			<br />
			<div id="addr_suggest"></div>
			{{ form.body }}
			</br>
			<div style="text-align:right; z-index:2; "><input type="submit" id="postMsg" name="postMsg" value="Post" alt="Post message" /></div>
		</form>
		<div id="help_tag">@3d6 + 2, [[link]], '''Bold''', ///Italic///, ---Title---</div>
		{% if isError %}
			<p id="errorMessage">Please fill up the address and message body fields</p>
		{% endif %}
	</div>
	<div class="msgPageSelect">
		<button type="button" onclick="javascript:expandCollapseAll(this);">expand</button>
		<div class="go_to_page">page 
			<input class="go_to_page_input" type="text" id="gtp_input" maxlength="5" value="{{selectedPage}}"
			onfocus="this.value='';" onblur="this.value=selectedPage;" onkeyup="goToMessage(this.value, event);"/>/{{numOfPages}}
		</div>
	</div>
	{% for id, orig, dest, body, date, class_header, class_content in messages %}
	<div class="post">
		<div class="{{class_header}}" id="message_header_{{id}}" onclick="javascript:headerClick({{id}});">
			{{date}} - <strong>{{orig}}</strong> <small>to : {{dest}}</small>
		</div>
		<div class="{{class_content}}" id="message_content_{{id}}">	
			<p>{{body|safe}}</p>
		</div>			
	</div>
	{% endfor %}
</div>
{% include "rpgEngine/foot.html" %}
